<template>
  <view class="payment-detail-page">
    <!-- 顶部状态栏 -->
    <!-- <view class="status-bar">
      <view class="status-badge">已收款</view>
    </view> -->
    
    <!-- 基本信息区域 -->
    <view class="info-section">
      <view class="info-item">
        <text class="info-label">客户</text>
        <text class="info-value">{{ paymentData.customerName || '无客户' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">收款日期</text>
        <text class="info-value">{{ paymentData.businessDate || paymentData.createTime }}</text>
      </view>
      <!-- <view class="info-item">
        <text class="info-label">单据编号</text>
        <text class="info-value">{{ paymentData.receiptCode || paymentData.code || '-' }}</text>
      </view> -->
    </view>
    
    <!-- 收款金额明细 -->
    <view class="payment-section">
      <view class="section-title">收款方式</view>
      
      <!-- 现金 -->
      <view class="payment-item" v-if="paymentData.cashAmount">
        <view class="payment-item-left">
          <view class="payment-icon cash-icon">
            <u-icon name="rmb-circle" color="#fff" size="24"></u-icon>
          </view>
          <text class="payment-method">现金</text>
        </view>
        <text class="payment-amount">¥{{ formatAmount(paymentData.cashAmount) }}</text>
      </view>
      
      <!-- 银行存款 -->
      <view class="payment-item" v-if="paymentData.bankAmount">
        <view class="payment-item-left">
          <view class="payment-icon bank-icon">
            <u-icon name="minus-circle" color="#fff" size="24"></u-icon>
          </view>
          <text class="payment-method">银行存款</text>
        </view>
        <text class="payment-amount">¥{{ formatAmount(paymentData.bankAmount) }}</text>
      </view>
      
      <!-- 微信 -->
      <view class="payment-item" v-if="paymentData.wechatAmount">
        <view class="payment-item-left">
          <view class="payment-icon wechat-icon">
            <u-icon name="weixin-circle-fill" color="#fff" size="24"></u-icon>
          </view>
          <text class="payment-method">微信</text>
        </view>
        <text class="payment-amount">¥{{ formatAmount(paymentData.wechatAmount) }}</text>
      </view>
      
      <!-- 支付宝 -->
      <view class="payment-item" v-if="paymentData.alipayAmount">
        <view class="payment-item-left">
          <view class="payment-icon alipay-icon">
            <u-icon name="zhifubao-circle-fill" color="#fff" size="24"></u-icon>
          </view>
          <text class="payment-method">支付宝</text>
        </view>
        <text class="payment-amount">¥{{ formatAmount(paymentData.alipayAmount) }}</text>
      </view>
      
      <!-- 合计金额 -->
      <view class="payment-total">
        <text class="total-label">合计金额</text>
        <text class="total-amount">¥{{ formatAmount(paymentData.totalAmount) }}</text>
      </view>
    </view>
    
    <!-- 备注信息 -->
    <view class="remark-section" v-if="paymentData.remark">
      <view class="section-title">备注</view>
      <view class="remark-content">
        {{ paymentData.remark }}
      </view>
    </view>
    
    <!-- 操作栏 -->
    <view class="action-bar">
      <button class="action-btn delete-btn" @click="handleDelete">删除</button>
      <button class="action-btn share-btn" @click="handleEdit">编辑</button>
    </view>
    
    <!-- 删除确认弹窗 -->
    <u-modal 
      :show="showDeleteModal" 
      title="确认删除" 
      content="确定要删除该收款单吗？删除后将无法恢复。" 
      @confirm="confirmDelete" 
      @cancel="showDeleteModal = false">
    </u-modal>
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      id: null,
      type: null,
      paymentData: {
        customerName: '',
        businessDate: '',
        receiptCode: '',
        totalAmount: 0,
        cashAmount: 0,
        bankAmount: 0,
        wechatAmount: 0,
        alipayAmount: 0,
        remark: ''
      },
      showDeleteModal: false,
      showSharePopup: false,
    };
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.type = options.type;
      
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  onShow() {
    this.loadPaymentData();
  },    
  methods: {
    // 加载收款单数据
    loadPaymentData() {
      uni.showLoading({ title: '加载中' });
      
      // 根据单据类型选择API
      let apiPromise;
      if (this.type === 'receiveOrder') {
        // 销售收款单
        apiPromise = api.getSalesDetail(this.id);
      } else {
        // 如果有其他类型的收款单，添加对应逻辑
        apiPromise = Promise.reject('不支持的单据类型');
      }
      
      apiPromise.then(res => {
        console.log('收款单数据:', res);
        
        if (res) {
          // 更新基本数据
          this.paymentData = {
            ...this.paymentData,
            ...res,
            // 确保金额有默认值
            totalAmount: res.totalAmount,
            cashAmount: res.cashAmount || 0,
            bankAmount: res.bankAmount || 0,
            wechatAmount: res.wechatAmount || 0,
            alipayAmount: res.alipayAmount || 0
          };
          
          // 如果有客户ID，查询客户信息
          if (res.customerId) {
            api.getCustomer(res.customerId).then(customerRes => {
              console.log('客户信息:', customerRes);
              
              // 更新客户名称
              if (customerRes && customerRes.customerName) {
                this.paymentData.customerName = customerRes.customerName;
              } else {
                this.paymentData.customerName = '未知客户';
              }
              
              uni.hideLoading();
            }).catch(err => {
              console.error('获取客户信息失败:', err);
              this.paymentData.customerName = `客户(ID:${res.customerId})`;
              uni.hideLoading();
            });
          } else {
            this.paymentData.customerName = '无客户信息';
            uni.hideLoading();
          }
        } else {
          this.handleApiError(res);
          uni.hideLoading();
        }
      }).catch(err => {
        uni.hideLoading();
        console.error('获取收款单数据失败:', err);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      });
    },
    
    // 格式化金额显示
    formatAmount(amount) {
      if (amount === undefined || amount === null) return '0.00';
      return parseFloat(amount).toFixed(2);
    },
    
    // 处理删除操作
    handleDelete() {
      this.showDeleteModal = true;
    },
    
    // 处理编辑操作
    handleEdit() {
      uni.navigateTo({
        url: `/subPack/payment/edit?id=${this.id}&type=${this.type}`
      });
    },
    
    // 确认删除
    confirmDelete() {
      uni.showLoading({ title: '删除中' });
      
      let apiPromise;
      if (this.type === 'receiveOrder') {
        apiPromise = api.deleteSales(this.id);
      } else {
        apiPromise = Promise.reject('不支持的单据类型');
      }
      
      apiPromise.then(res => {
        uni.hideLoading();
        
        if (res && res.code === 200) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          this.handleApiError(res);
        }
      }).catch(err => {
        uni.hideLoading();
        console.error('删除收款单失败:', err);
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        });
      });
      
      this.showDeleteModal = false;
    },
    
    // 处理分享操作
    handleShare() {
      this.showSharePopup = true;
    },
    
    // 分享到微信
    shareToWechat() {
      // 实现微信分享逻辑
      uni.showToast({
        title: '暂未实现微信分享',
        icon: 'none'
      });
      this.showSharePopup = false;
    },
    
    // 生成分享图片
    generateImage() {
      // 实现生成图片分享逻辑
      uni.showToast({
        title: '暂未实现图片生成',
        icon: 'none'
      });
      this.showSharePopup = false;
    },
    
    // 处理打印操作
    handlePrint() {
      uni.showToast({
        title: '打印功能暂未实现',
        icon: 'none'
      });
    },
    
    // 处理API错误
    handleApiError(res) {
      console.error('API错误:', res);
      uni.showToast({
        title: res?.msg || '操作失败',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.payment-detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx;
}

// 顶部状态栏
.status-bar {
  background-color: #3ACBC1;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .status-badge {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}

// 基本信息区域
.info-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: 28rpx;
      color: #666666;
    }
    
    .info-value {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
  }
}

// 收款方式区域
.payment-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    .payment-item-left {
      display: flex;
      align-items: center;
    }
    
    .payment-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      
      &.cash-icon {
        background-color: #FFA500;
      }
      
      &.bank-icon {
        background-color: #2196F3;
      }
      
      &.wechat-icon {
        background-color: #07C160;
      }
      
      &.alipay-icon {
        background-color: #1677FF;
      }
    }
    
    .payment-method {
      font-size: 28rpx;
      color: #333333;
    }
    
    .payment-amount {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
  }
  
  .payment-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    
    .total-label {
      font-size: 30rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .total-amount {
      font-size: 36rpx;
      color: #FF5252;
      font-weight: bold;
    }
  }
}

// 备注区域
.remark-section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
  
  .section-title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .remark-content {
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #666666;
    line-height: 1.6;
  }
}

// 底部操作栏
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    border-radius: 12rpx;
    margin: 0 10rpx;
  }
  
  .delete-btn {
    background-color: #ffffff;
    color: #FF5252;
    border: 1rpx solid #FF5252;
  }
  
  .share-btn {
    background-color: #ffffff;
    color: #3ACBC1;
    border: 1rpx solid #3ACBC1;
  }
  
  .print-btn {
    background-color: #3ACBC1;
    color: #ffffff;
    border: none;
  }
}

// 分享弹窗
.share-popup {
  padding: 30rpx;
  
  .share-title {
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 30rpx;
  }
  
  .share-options {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40rpx;
  }
  
  .share-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    text {
      font-size: 24rpx;
      color: #666666;
      margin-top: 10rpx;
    }
  }
  
  .share-cancel {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 30rpx;
    color: #333333;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style>
